<template>
  <view class="success">
    <view class="top">
      <view class="top-image">
        <image src="../../static/resort/need/green_answer.png" mode=""></image>
      </view>
      <view class="top-tit">发布成功！</view>
    </view>
    <view class="middle">
      <view class="middle-item">
        <view class="middle-prompt">
          <image src="../../static/resort/need/prompt_text.png" @click="promptShow = true">
          </image>
        </view>
        <!-- 提示弹出层 -->
        <view class="popup-one">
          <u-popup :show="promptShow" mode="center" @open="promptOpen()" @close="promptClose()" :round="10">
            <view class="popup-con">
              <view class="prompt-poput">
                <image src="../../static/resort/need/green_prompt_text.png" class="poput-prompt-image"></image>
                作品同时发布到微信、朋友圈展现效果更佳平台内的操作(如删除、修改作品等)将不会在微信、朋友圈中生效。
              </view>
            </view>
          </u-popup>
        </view>
        <!-- 提示弹出层 -->
        <view class="middle-tit">
          同步至微信、朋友圈
        </view>
        <!-- 分享弹出层 -->
        <view class="share-popup">
          <u-popup :show="shareShow" @close="shareClose()" @open="shareOpen()" :round="20" mode="bottom">
            <view class="popup-top">
              <view class="popup-tit">分享到：</view>
              <view class="popup-close" @click="shareShow = !true">
                <image src="../../static/resort/need/block_close.png" mode=""></image>
              </view>
            </view>
            <view class="share-bottom">
              <view class="share-bottom-item">
                <view class="share-image">
                  <image src="../../static/resort/need/weixin.png" mode=""></image>
                </view>
                <view class="share-tit">
                  转发给好友
                </view>
              </view>
              <view class="share-bottom-item">
                <view class="share-image">
                  <image src="../../static/resort/need/circle_of_friends.png" mode=""></image>
                </view>
                <view class="share-tit">
                  分享到朋友圈
                </view>
              </view>
            </view>
          </u-popup>
        </view>
        <!-- 分享弹出层 -->
        <view class="middle-prompt">
          <image src="../../static/resort/need/green_share.png" @click="shareShow = true"></image>
        </view>
      </view>
      <view class="middle-item">
        <view class="middle-prompt">
          <image src="../../static/resort/need/prompt_text.png" @click="promptShow = true"></image>
        </view>
        <!-- 提示弹出层 -->
        <view class="popup-one">
          <u-popup :show="promptShow" mode="center" @open="promptOpen()" @close="promptClose()" :round="10">
            <view class="popup-con">
              <view class="prompt-poput">
                <image src="../../static/resort/need/green_prompt_text.png" class="poput-prompt-image"></image>
                作品同时发布到微信、朋友圈展现效果更佳平台内的操作(如删除、修改作品等)将不会在微信、朋友圈中生效。
              </view>
            </view>
          </u-popup>
        </view>
        <!-- 提示弹出层 -->
        <view class="middle-tit">
          置顶信息、扩大曝光
        </view>
        <!-- 推广弹出框 -->
        <view class="promotion-popup">
          <u-popup :show="promotionShow" @close="promotionClose()" @open="promotionOpen()" :round="20" mode="bottom">
            <view class="popup-top">
              <view class="promotion-left">
                <view class="popup-close">
                  <image src="../../static/resort/need/scope_map.png" mode=""></image>
                </view>
                <view class="popup-tit">推广范围</view>
              </view>
              <view class="popup-close" @click="promotionShow = !true">
                <image src="../../static/resort/need/block_close.png" mode=""></image>
              </view>
            </view>
            <view class="wrap">
              <u-slider v-model="sliderValue"></u-slider>
            </view>
            <view class="popup-top">
              <view class="promotion-left">
                <view class="popup-close">
                  <image src="../../static/resort/need/time.png" mode=""></image>
                </view>
                <view class="popup-tit">推广时长</view>
              </view>
            </view>
            <view class="wrap">
              <u-slider v-model="sliderValue"></u-slider>
            </view>
            <view class="popup-money">
              <view class="expect-name">
                预计费用：
              </view>
              <view class="expect-num">
                150元
              </view>
            </view>
            <view class="bottom">
              <view class="popup-button">
                付费推广
              </view>
            </view>
          </u-popup>
        </view>
        <!-- 推广弹出框 -->
        <view class="middle-prompt">
          <image src="../../static/resort/need/red_wifi.png" @click="promotionShow = true"></image>
        </view>
      </view>
    </view>
    <!-- 查看发布作品信息 -->
    <view class="grey-bg">
      <view class="need-button">
        查看发布作品信息
      </view>
    </view>
    <!-- 查看发布作品信息 -->
  </view>
</template>

<script>
  export default {
    data() {
      return {
        promptShow: false,
        shareShow: false,
        promotionShow: false,
        sliderValue: 30,
      };
    },
    methods: {
      promptClose() {
        this.promptShow = false
        console.log('promptClose');
      },
      promptOpen() {
        console.log('promptOpen');
      },
      shareOpen() {
        console.log('shareOpen');
      },
      shareClose() {
        this.shareShow = false
        console.log('shareClose');
      },
      promotionOpen() {
        console.log('promotionOpen');
      },
      promotionClose() {
        this.promotionShow = false
        console.log('promotionClose');
      },
    }
  }
</script>

<style lang="scss">
  .success {
    width: 100vw;

    .top {
      width: 50vw;
      margin: 0 auto;
      text-align: center;
      padding: 120rpx 0;

      .top-image {
        width: 128rpx;
        height: 128rpx;
        margin: 0 auto;

        image {
          width: 100%;
          height: 100%;
        }
      }

      .top-tit {
        font-size: 44rpx;
        margin-top: 20rpx;
      }
    }

    .middle {
      width: 55vw;
      margin: 0 auto;

      .middle-item {
        display: flex;
        justify-content: space-between;

        .middle-prompt {
          image {
            width: 40rpx;
            height: 40rpx;
            vertical-align: middle;
          }
        }

        // 提示弹出层
        .popup-one {
          .popup-con {
            width: 80vw;
            margin: 0 auto;
            background-color: #505050;
            color: #CBCBCB;
            border-radius: 20rpx;

            .prompt-poput {
              padding: 10rpx;

              .poput-prompt-image {
                width: 32rpx;
                height: 32rpx;
                vertical-align: middle;
                margin-right: 10rpx;
              }
            }
          }
        }

        // 分享弹出层
        .share-popup {
          .popup-top {
            display: flex;
            justify-content: space-between;
            padding: 5vw;
            box-sizing: border-box;

            .popup-close {
              image {
                width: 30rpx;
                height: 30rpx;
                vertical-align: middle;
              }
            }
          }

          .share-bottom {
            display: flex;
            justify-content: space-around;
            padding: 40rpx 0;

            .share-bottom-item {
              .share-image {
                image {
                  width: 160rpx;
                  height: 160rpx;
                }
              }

              .share-tit {
                color: #878787;
                font-size: 28rpx;
              }
            }
          }
        }

        // 推广弹出框
        .promotion-popup {
          .popup-top {
            display: flex;
            justify-content: space-between;
            padding: 5vw;
            box-sizing: border-box;

            .promotion-left {
              display: flex;

              .popup-tit {
                font-size: 32rpx;
                margin-left: 10rpx;
              }
            }

            .popup-close {
              image {
                width: 30rpx;
                height: 30rpx;
                vertical-align: middle;
              }
            }
          }

          .wrap {
            width: 90vw;
            margin: 0 auto;
          }

          .popup-money {
            display: flex;
            justify-content: center;

            .expect-name {
              color: #989898;
              font-size: 28rpx;
            }

            .expect-num {
              color: #FA2930;
              font-size: 28rpx;
            }
          }

          .bottom {
            padding: 20rpx 0;

            .popup-button {
              width: 85vw;
              height: 80rpx;
              line-height: 80rpx;
              text-align: center;
              margin: 0 auto;
              border-radius: 10rpx;
              background-color: #FA2930;
              color: #fff;
              font-size: 36rpx;
            }
          }
        }

        .middle-tit {
          color: #868686;
        }
      }

      .middle-item:first-child {
        margin-bottom: 60rpx;
      }
    }

    // 查看发布作品信息
    .grey-bg {
      margin-top: 30vh;

      .need-button {
        width: 90vw;
        margin: 0rpx auto;
        height: 80rpx;
        line-height: 80rpx;
        background-color: #FF2A31;
        color: #fff;
        text-align: center;
        border-radius: 10rpx;
      }
    }
  }
</style>